<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网址收藏</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="stylesheet" href="/css/tags.css">
    <link rel="icon" href="/images/logo.png">
</head>
<body>
<div class="container">
    <h1>我的网址收藏</h1>

    <!-- 标签管理区域 -->
    <div class="tags-section">
        <div class="tags-header">
            <h2>标签管理</h2>
            <button id="addTagBtn" class="add-btn small">添加标签</button>
        </div>
        <div class="tags-container" id="tagsContainer">
            <!-- 标签将在这里动态生成 -->
        </div>
    </div>

    <!-- 搜索和添加区域 -->
    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="搜索收藏的网址...">
        <select id="tagFilter">
            <option value="">所有标签</option>
            <!-- 标签选项将动态添加 -->
        </select>
        <button id="searchBtn">搜索</button>
    </div>

    <button id="addBookmarkBtn" class="add-btn">添加新网址</button>

    <div class="bookmarks-container" id="bookmarksContainer">
        <!-- 书签卡片将在这里动态生成 -->
    </div>
</div>

<!-- 添加/编辑书签的模态框 -->
<div class="modal" id="bookmarkModal">
    <div class="modal-content">
        <h2 id="modalTitle">添加新网址</h2>
        <form id="bookmarkForm">
            <input type="hidden" id="bookmarkId">
            <div class="form-group">
                <label for="bookmarkTitle">标题</label>
                <input type="text" id="bookmarkTitle" required>
            </div>
            <div class="form-group">
                <label for="bookmarkUrl">网址</label>
                <input type="url" id="bookmarkUrl" required placeholder="https://example.com">
            </div>
            <div class="form-group">
                <label for="bookmarkImage">图片URL (可选)</label>
                <input type="url" id="bookmarkImage" placeholder="https://example.com/image.jpg">
            </div>
            <div class="form-group">
                <label>选择标签</label>
                <div class="tag-selector" id="tagSelector">
                    <!-- 标签选择器将在这里动态生成 -->
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn" id="cancelBtn">取消</button>
                <button type="submit" class="save-btn">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 添加/编辑标签的模态框 -->
<div class="modal" id="tagModal">
    <div class="modal-content">
        <h2 id="tagModalTitle">添加新标签</h2>
        <form id="tagForm">
            <input type="hidden" id="tagId">
            <div class="form-group">
                <label for="tagName">标签名称</label>
                <input type="text" id="tagName" required>
            </div>
            <div class="form-group">
                <label for="tagColor">标签颜色</label>
                <input type="color" id="tagColor" value="#4CAF50">
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn" id="cancelTagBtn">取消</button>
                <button type="submit" class="save-btn">保存</button>
            </div>
        </form>
    </div>
</div>

<script src="/js/app.js"></script>
<script src="/js/tags.js"></script>
</body>
</html>